<template>
  <div>
    <div style="margin-top:20px;height: 240px;background-repeat: no-repeat;background-size:auto 100%;" :style="'background-image: url(' + require('@/assets/img/content-bg.png') + ');'">
      <div style="position:relative;float: left;left: 5%;height: 80%;width: 90%;top: 13%;text-align: left;">
        <div style="width: 38%;display: inline-block;text-align: center;line-height: 30px;color: rgb(149, 149, 150);">今日用量（折标准煤）</div>
        <div style="width: 48%;display: inline-block;text-align: center;line-height: 30px;color: rgb(149, 149, 150);">今日用量（折货币）</div>
        <div style="height: 15px;"></div>
        <div style="width: 38%;display: inline-block;text-align: center;line-height: 30px;">{{$doubleLab(data.increaseStandValue)}}&nbsp;{{energyInfo.standUnite}}（
          <i :style="'color:' + labelColor" :class="labelClass">{{ data.compareYesterday }}</i>）
        </div>
        <div style="width: 48%;display: inline-block;text-align: center;line-height: 30px;">{{ $doubleLab(data.increaseCashValue) }} &nbsp;{{energyInfo.cashUnite}}&nbsp;
          （<i :style="'color:' + labelColor" :class="labelClass">{{ data.compareYesterday }}</i>）</div>
        <div style="width: 100%; text-align: left;line-height: 40px;margin-top: 20px;padding-left: 5%;">
          <div style="position:relative;padding:15px;float:left;width: 50px;height: 50px;border: 5px solid rgb(0, 250, 150);border-radius: 50px;font-size: 13px;line-height: 30px;text-align: center;">
            <i style="color: rgb(149, 149, 150);">建筑数</i><br>{{data.buildingIds.length}}个
          </div>
          <div style="margin-left:50px;position:relative;padding:10px;float:left;width: 60px;height: 60px;border: 5px solid rgb(0, 150, 250);border-radius: 50px;font-size: 13px;line-height: 30px;text-align: center;">
            <i style="color: rgb(149, 149, 150);">智能表数</i><br>{{data.meterIds.length}}个
          </div>
          <div style="margin-left:50px;position:relative;padding:10px;float:left;width: 60px;height: 60px;border: 5px solid rgb(255, 204, 0);border-radius: 50px;font-size: 13px;line-height: 30px;text-align: center;">
            <i style="color: rgb(149, 149, 150);">采集点数</i><br>{{data.pointIds.length}}个
          </div>
        </div>
      </div>
    </div>
    <div style="position: relative;float: left;top: -255px;left: 190px;font-size: 17px;height: 25px;font-style: italic;">
      今日监控
    </div>
  </div>
</template>
<script>

export default {
  props: [
    'selectedEnergy'
  ],
  data() {
    return {
      energyInfo: {
        list:[],
        standUnite: 'kgce',
        cashUnite: '元'
      },
      labelColor: '',
      labelClass: '',
      data: {
        buildingIds: [],
        meterIds: [],
        pointIds: [],
        increaseStandValue: 0,
        increaseCashValue: 0,
        compareYesterday: '-',
        compareState: 0
      }
    }
  },
  name: "map-view",
  mounted() {
    this.getEnergyList()
    this.fetchData()
    this.refreshData()
  },
  unmounted() {
  },
  methods: {
    refreshData: function () {
      setInterval(this.fetchData, 1000 * 60 * 10)
    },
    fetchData: function () {
      this.$axios({url:'/ems/client/fullscreen/basic/info', data: {}}).then((content) => {
        this.data = content
        if (content.compareState > 0) {
          this.labelColor = 'red';
          this.labelClass = 'el-icon-top'
        }else if (content.compareState < 0){
          this.labelColor = 'green';
          this.labelClass = 'el-icon-bottom'
        }
      })
    },
    getEnergyList: function () {
      const data = {content: {}}
      this.$axios({url:'/ems/client/index/energy/list',data: data}).then((content) => {
        this.energyInfo.list = content.list
      });
    }
  },
};
</script>
<style>
</style>
